<template>
  <div class="llt-header">
    <div class="aic jcb top w100" style="background: var(--navColorBg)">
      <!-- 一级导航左边 start -->
      <div class="aic">
        <!-- 菜单抽屉 start -->
        <div class="hidden-md-and-down" @click="handleCollapse">
          <!-- <i
            v-show="!isCollapse"
          
           
          ></i> -->
          <el-icon
            style="color: var(--navColorFont)"
          v-show="!isCollapse"
           class="llt-icon-size "
          ><fold /></el-icon>
          <el-icon
             class="llt-icon-size "
           style="color: var(--navColorFont)"
            v-show="isCollapse"
          ><expand /></el-icon>
        </div>
        <!-- 菜单抽屉 end -->
        <div class="hidden-md-and-up1" @click="handleshowMenu">
          
          <el-icon  style="color: var(--navColorFont)"
            class=" llt-icon-size"><operation /></el-icon>
        </div>
        <div class="mx15 aic">
          <div
          class="aic"
            style="color: var(--navColorFont)"
            v-for="(item, index) in levelList"
            :key="index"
          >
            <span @click.prevent="handleLink(item,index)" :class="index==0?'cP':''"> {{ item.meta.title }}</span>
            <el-icon   v-if="index < levelList.length - 1"
             class="mx5 " style="font-size:20px"><arrow-right /></el-icon>
          </div>
        </div>
      </div>
      <!-- 一级导航左边 end -->

      <!-- 二级导航左边 start -->
    <div class="aic">
        <div class="aic">
       <searchBox />
        <messageBox />
          <el-tooltip
            class="item"
            effect="dark"
            :content="!isFullscreen ? '全屏' : '退出全屏'"
            placement="bottom"
          >
           

            <el-icon  style="color: var(--navColorFont)"
              @click="toggle"
              v-if="!isFullscreen"
              class="llt-icon-size "><full-screen /></el-icon>
           
            <el-icon  style="color: var(--navColorFont)"
              @click="toggle"
              v-else
              class="llt-icon-size "><rank /></el-icon>
          </el-tooltip>
        </div>
        <userBox />
        <editBox />
      </div>
      <!-- 二级导航左边 end -->
    </div>
    <!-- 上下分割线 -->

    <div class="aic white-bg">
      <div class="flex1">
        <LltTags
          @handleClose="handleClose"
          @handleOpen="handleOpen"
         
          :tagsData="$store.state.tagPages"
        />
      </div>

      <div class="aic">
        <el-tooltip class="item" effect="dark" content="刷新页面" placement="bottom">
        
          <el-icon @click="handleRefresh" class="llt-icon-size "><refresh /></el-icon>
        </el-tooltip>
      </div>
    </div>
   
    <!-- 菜单导航 start -->
    <div class="llt-drawaer">
      <el-drawer direction="ltr"
      size="200"
       :with-header="false" v-model="showMenuBool">
        <Menu />
      </el-drawer>
    </div>

    <!-- 菜单导航 start -->
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  watch,
  onMounted,
} from "vue";
import { useFullscreen } from "@vueuse/core";
import { store } from "/@ts/store";

import LltTags from "/@/layouts/components/llt-tags.vue";
import Menu from "/@/layouts/components/menu.vue";
import type { AppRouteModule } from "/@ts/router/types";
import { useRouter,useRoute } from "vue-router";
import { ElLoading } from "element-plus";
import messageBox from "/@/layouts/components/messageBox.vue";
import searchBox from "/@/layouts/components/searchBox.vue";
import userBox from "/@/layouts/components/userBox.vue";
import editBox from "/@/layouts/components/editBox.vue";
const router = useRouter();
const route = useRoute()
const levelList = ref([])
watch(
  () => route,
  (val:any) => {
    const {name} = val;
    if(!name)return
    store.commit('setMenuActiveName', val.path)//激活菜单
    store.commit('setTagPages', val);//更新tab标签页
  },
  {
    deep:true,
    immediate:true
  }
);
const isDashboard = (route:any) =>{
        const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim() === 'dashboardWorkbench'
}
const handleLink = (data:any,index:Number) =>{
  if(index==0){
    router.push(data)
  }
}
const getBreadcrumb = () =>{
   let matched:any = route.matched.filter(item => item.meta && item.meta.title)
    const first = matched[0]
       if (!isDashboard(first)) {
        matched = [{ path: '/workbench', meta: { title: '工作台' }}].concat(matched)
      }
      levelList.value = matched.filter((item:any) => item.meta && item.meta.title && item.meta.breadcrumb !== false)
}
watch(
  () => route,
  (val:any) => {
    if(val.path.startsWith('/redirect/')){
      return
    }
  getBreadcrumb()
  },
  {
    deep:true,
    immediate:true
  }
);
const internalInstance = getCurrentInstance(); //获取当前实例
const globalProperties = internalInstance?.appContext.config.globalProperties;
const emit = defineEmits(["handleCollapse"]);
interface HeaderColors {
  [key: string]: string;
}
interface StateHeader {
  userInfo: Object;
  levelList:[]
}
const state: StateHeader = reactive({
  levelList:[],
  userInfo: {},
});
const props = defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
});
let searchBool = ref(false);
let drawerBool = ref(false);
let showMenuBool = ref(false);
onMounted(() => {
  // getUserInfo();
});
const getUserInfo = () => {
  let data: string = localStorage.getItem(
    import.meta.env.VITE_USER_INFO_KEY as string
  ) as string;
  state.userInfo = JSON.parse(data);
};

/**
 * 打开菜单 低于 md显示
 */
const handleshowMenu = () => {
  showMenuBool.value = true;
};


const handleHide = (e: boolean) => {
  searchBool.value = !e;
};
const handleRefresh = () => {
  store.commit("setRefresh");
};
const handleSearch = () => {
  searchBool.value = true;
};
const handleCollapse = () => {
  emit("handleCollapse", props.isCollapse);
};
const handleClose = (e: number) => {
  store.commit("setCloseTagPages", e);
};
interface LltTags {
  index: number;
  routerItem: AppRouteModule;
}
const handleOpen = (e: LltTags) => {
  /**
   * 1. 获取数据 对比是否是当前激活 标签
   * 2. 如果是激活就不处理 不是激活标签就处理激活内容
   */
  store.commit("setMenuActiveName", e.routerItem.name);
  router.push(e.routerItem);
};

</script>

<style lang="scss">
.llt-drawaer .el-drawer>.el-drawer__body {
 padding: 0;
}
.header-setting-drawer {
  border-top: 1px solid #e6e6e6;
  padding: 10px 30px;
}

.header-message-tabs .el-tabs__active-bar {
  width: 44px !important;
}

.llt-header {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
    margin-bottom: 15px;
  .top {
    // position: relative;
    // z-index: 10000;
    // z-index: 3;
    border-top: solid 1px rgba(0, 0, 0, 0.1); //#e6e6e6
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    height: 54px;
  }
  .bottom {
    box-sizing: border-box;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }
}

.llt-badge {
  position: absolute;
  top: 10%;
  right: 11%;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: red;
}
.header-message-tabs {
  padding-top: 0;
  width: 400px;

  .item {
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 2rem;
  }
  .time {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 2rem;
  }
}
.header-theme-color-item {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  color: #fff;
  margin-left: 10px;
}
#el-popper-3198 {
  z-index: 1000012 !important;
}
</style>
